<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
    <div class="down_page">
        <!---------------------------|导航树 -->
        <div class="down_page_left">
            <NAnchor style="z-index: 1">
                <NAnchorLink title="名称" href="#anchorName" style="margin-top: 5px" />
                <NAnchorLink title="尺寸" href="#anchorSize" style="margin-top: 5px" />
            </NAnchor>
        </div>
        <!---------------------------|工具按钮 -->
        <div class="down_page_tool">
            <div style="width: 5px"></div>
            <div class="h_flex_column_around">
                <!-- 新建页面 -->
                <NTooltip placement="bottom" trigger="hover">
                    <template #trigger>
                        <svg class="h_svg_icon" xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize" :height="IconSize"
                            viewBox="0 0 1024 1024" v-html="myStore.getDataManagerIcon('dataNewIcon')"
                            @click="myStore.createNewPage()"></svg>
                    </template>
                    <span>新建页面</span>
                </NTooltip>
                <!-- 复制参数 -->
                <NTooltip placement="bottom" trigger="hover">
                    <template #trigger>
                        <svg class="h_svg_icon" xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize" :height="IconSize"
                            viewBox="0 0 1024 1024" v-html="myStore.getDataManagerIcon('dataCopyIcon')"
                            @click="myStore.copyPageCanvasInfo()"></svg>
                    </template>
                    <span>复制页面参数</span>
                </NTooltip>
                <!-- 粘贴参数 -->
                <NTooltip placement="bottom" trigger="hover">
                    <template #trigger>
                        <svg class="h_svg_icon" xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize" :height="IconSize"
                            viewBox="0 0 1024 1024" v-html="myStore.getDataManagerIcon('pasteIcon')"
                            @click="myStore.pastePageCanvasInfo()"></svg>
                    </template>
                    <span>粘贴页面参数</span>
                </NTooltip>
            </div>
            <div style="width: 20px"></div>
        </div>
        <!---------------------------|属性 -->
        <div class="down_page_right">
            <!---------------------------|名称 -->
            <div id="anchorName" class="anchor_link">
                <!-- 页面名称 -->
                <div class="h_info">
                    <text class="h_info_lable">页面名称:</text>
                    <NInput type="text" class="h_info_val" v-model:value="myStore.canvasAttr.pageName" />
                </div>
                <!-- 页面尺寸 -->
                <div class="h_info">
                    <text class="h_info_lable">页面尺寸:</text>
                    <NSelect class="h_info_val" v-model:value="myStore.canvasAttr.pageSize" :options="pageSizeOpt" />
                </div>
                <!-- 页面方向 -->
                <div class="h_info" v-if="pageSize !== 'custom'">
                    <text class="h_info_lable">页面方向:</text>
                    <NSelect class="h_info_val" v-model:value="myStore.canvasAttr.pageOrientation"
                        :options="pageOrientationOpt" />
                </div>
                <!-- 页面精度 -->
                <div class="h_info">
                    <text class="h_info_lable">页面精度:</text>
                    <NSelect class="h_info_val" v-model:value="myStore.canvasAttr.pageAccuracy"
                        :options="pageAccuracyOpt" />
                </div>
                <!-- 页面ID -->
                <div class="h_info">
                    <text class="h_info_lable">页面ID:</text>
                    <text class="h_info_val">{{ myStore.canvasAttr.pageKey }}</text>
                </div>
            </div>

            <!---------------------------|尺寸 -->
            <n-divider />
            <div id="anchorSize" class="anchor_link">
                <!-- 页面宽度 -->
                <div class="h_info" v-if="pageSize === 'custom'">
                    <text class="h_info_lable">页面宽度:</text>
                    <div class="h_flex_column h_info_val">
                        <NSlider class="h_margin_top_10" v-model:value="myStore.canvasAttr.canvasWidth" />
                        <NInputNumber class="h_margin_top_10" v-model:value="myStore.canvasAttr.canvasWidth" />
                    </div>
                </div>
                <div class="h_info" v-if="pageSize !== 'custom'">
                    <text class="h_info_lable">页面宽度:</text>
                    <text class="h_info_val">{{ myStore.canvasAttr.canvasWidth }}</text>
                </div>
                <!-- 页面高度 -->
                <div class="h_info" v-if="pageSize === 'custom'">
                    <text class="h_info_lable">页面高度:</text>
                    <div class="h_flex_column h_info_val">
                        <NSlider class="h_margin_top_10" v-model:value="myStore.canvasAttr.canvasHeight" />
                        <NInputNumber class="h_margin_top_10" v-model:value="myStore.canvasAttr.canvasHeight" />
                    </div>
                </div>
                <div class="h_info" v-if="pageSize !== 'custom'">
                    <text class="h_info_lable">页面高度:</text>
                    <text class="h_info_val">{{ myStore.canvasAttr.canvasHeight }}</text>
                </div>
                <!-- 页面单位 -->
                <div class="h_info">
                    <text class="h_info_lable">页面单位:</text>
                    <text class="h_info_val">{{ myStore.canvasAttr.pageUnit }}</text>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 引入存储
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
import { storeToRefs } from "pinia";
import { useEditorStore } from "@/store"; // 画布

/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
// 🐸 使用存储
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
const myStore = useEditorStore(); // 画布

/* ================================================================================================ */
//                                 ★变量
/* ================================================================================================ */
let pageSize = computed(() => myStore.canvasAttr.pageSize);
/** 图标尺寸 */
const IconSize = 36;
// ——————————————————————————————————————————————————————————————————————————| 选项
/** 页面尺寸选项 */
const pageSizeOpt = myStore.staticData.pageSizeOpt;
/** 页面方向选项  */
const pageOrientationOpt = myStore.staticData.pageOrientationOpt;
/** 页面精度选项  */
const pageAccuracyOpt = myStore.staticData.pageAccuracyOpt;

</script>

<style lang="scss" scoped>
// 容器
.down_page {
    width: 100%;
    max-height: 250px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    background-color: rgb(80, 80, 80);
    overflow: hidden;
    user-select: none;

    // 容器-左边导航
    .down_page_left {
        width: 300px;
        margin-left: 10px;
        overflow-x: hidden;
        overflow-y: scroll;
        /* firefox */
        scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
        scrollbar-width: auto;

        /* chrome */
        &::-webkit-scrollbar,
        &::-webkit-scrollbar-track-piece {
            background-color: transparent;
        }

        &::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        &::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background-color: rgb(197, 197, 197);
        }
    }

    .down_page_tool{
        max-height: 220px;
        width: 50px;
        margin-top: 20px;
        margin-right: 20px;
    }
    // 容器-左边参数
    .down_page_right {
        max-height: 200px;
        width: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
        /* firefox */
        scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
        scrollbar-width: auto;

        /* chrome */
        &::-webkit-scrollbar,
        &::-webkit-scrollbar-track-piece {
            background-color: transparent;
        }

        &::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        &::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background-color: rgb(197, 197, 197);
        }
    }
}
</style>
